<template>
    <view :style="{'padding': padding}">
        <view class="book-tab" :style="{'width': width,'justifyContent': justifyContent}">
            <text class="book-tab-item" :class="{'active': activeType===item.type}"
                  v-for="item in tabsTitle"
                  :key="item.type"
                  @tap="tabChange(item)">
                {{item.name}}
                <text v-if="activeType===item.type" :style="{'height': lineHeight}" class="active-line"/>
            </text>
        </view>
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: "tabs",
        props: {
            tabsTitle: {
                defalut: ()=>[],
                type: Array
            },
            width: {
                default: '750rpx',
                type: String
            },
            padding: {
                default: '50rpx',
                type: String
            },
            typeVal: {
                default: 1,
                type: [String, Number]
            },
            justifyContent: {
                defalut: 'space-between',
                type: String
            },
            lineHeight: {
                defalut: '2rpx',
                type: String
            }
        },
        watch: {
            typeVal: {
                handler(newVal){
                    this.activeType = newVal
                },
                immediate: true
            }
        },
        data(){
            return{
                activeType: ''
            }
        },
        methods: {
            tabChange(item){
                this.activeType = item.type;
                this.$emit('tabChange', item);
            }
        },
        mounted(){
            this.activeType= this.typeVal
        }
    }
</script>

<style scoped lang="scss">
    .book-tab {
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        font-size:28rpx;
        color:rgba(153,153,153,1);
        &-item{
            position: relative;
            .active-line{
                position: absolute;
                width:50%;
                height:2rpx;
                background:#2BA8FC;
                border-radius:4rpx;
                top: 50rpx;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .active{
            font-size:32rpx;
            font-weight:bold;
            color:#2BA8FC;
        }
    }
</style>